<template>
    <div class="lawyer-detail">
        <div class="nav-back" @click="goBack">
            <i class="el-icon-arrow-left"></i>
        </div>
        <div class="lawyer-box">
            <div class="other-list">
                <div class="other-box f-be">
                    <div class="flex left">
                        <div class="pic">
                            <img :src="userInfo.profile"/>
                        </div>
                        <div class="user-desc pad-L1">
                            <p>{{userInfo.name}}</p>
                            <p>ID:{{userInfo.uid}}</p>
                            <p><img class="marg-R1" style="width: 18px;vertical-align: middle;" src="../assets/images/balance-icon.png"/>{{userInfo.money}}</p>
                        </div>
                    </div>
                    <div class="right">
                        <p style="color:#2967E3;font-size:18px;" class="marg-B1 t-cen">{{userInfo.clue_total}}</p>
                        <p class="t-eight">跟踪线索</p>
                    </div>
                </div>
            </div>
            <div class="tab-list">
                <div class="items" v-for="(item,index) in tabList" :key="index" @click="tabClick(item,index)" :class="activeIndex == index ? 'active':'defau'">{{item}}</div>
            </div>
            <div class="category-content flex f-wp">
                <div class="item-box">全部</div>
                <div @click="cateClick(item,index)" class="item-box" v-for="(item,index) in categoryList"
                    :key="index" :class="childActive.indexOf(item.category_id) > -1 ? 'box-active':'box-gray'">{{item.category_title}}
                </div>
            </div>
            <div class="search-wrap">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item>
                        <el-select v-model="formInline.time" placeholder="请选择时间">
                            <el-option v-for="(item,index) in timeList" :key="index" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item>
                        <el-select v-model="formInline.category_id" placeholder="请选择分类">
                            <el-option v-for="(item,index) in categoryList" :key="index" :label="item.category_title" :value="item.category_id"></el-option>
                        </el-select>
                    </el-form-item> -->
					<el-form-item>
					    <el-cascader clearable v-model="formInline.city" placeholder="请选择地区" :options="areaList"></el-cascader>
					</el-form-item>
					<el-form-item>
					    <el-select v-model="formInline.level_id" placeholder="请选择等级">
					        <el-option v-for="(item,index) in levelList" :key="index" :label="item.level_title" :value="item.level_id"></el-option>
					    </el-select>
					</el-form-item>
					<el-form-item>
					    <el-select v-model="formInline.note_id" placeholder="请选择节点">
					        <el-option v-for="(item,index) in noteList" :key="index" :label="item.note_title" :value="item.note_id"></el-option>
					    </el-select>
					</el-form-item>
                    <el-form-item>
                        <el-button class="btn bg-blue" @click="queryClick">查询</el-button>
                        <el-button class="btn" @click="resetClick">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="case-list" v-if="clueList.length > 0">
                <div class="items" v-for="(item,index) in clueList" :key="index">
                    <div class="bot flex f-be f-mi">
                        <h1 class="title">{{item.clue.category_title}}</h1>
                        <div v-if="item.clue_status != 2">
                            <el-button class="btn t-eight" type="text" size="small" @click="transferClick(item)">转移</el-button>
                            <el-button class="btn t-eight" type="text" size="small" @click="editClick(item)">编辑</el-button>
                            <el-button class="btn t-eight" type="text" size="small" @click="delClick(item)">删除</el-button>
                        </div>
                    </div>
                    <div class="txt t-eight">
                        <p class="w50"><span>编号：{{item.clue.clue_id}}</span></p>
                        <p class="w50"><span>当事人：{{item.trace.linkman == '' ? item.clue.name : item.trace.linkman}}</span></p>
                        <p class="w50"><span>发布时间：{{item.trace.publish_time}}</span></p>
                        <p class="w50"><span>发布地：{{item.clue.location}}</span></p>
                        <p class="w50"><span>抢单时间：{{item.trace.buy_time}}</span></p>
                        <p class="w50"><span>联系电话：{{item.clue.phone}}</span></p>
                    </div>
                    <div class="">
                        <p class="marg-b-half">线索描述：</p>
                        <p class="t-eight">{{item.clue.content}}</p>
                    </div>
                </div>
            </div>
            <div class="t-cen" v-else>
                <img style="width: 100px;" src="../assets/images/no-data.png"/>
                <p class="t-eight">暂无数据</p>
            </div>
        </div>
        <editDialogVue :isEditDialog="isEditDialog" :editInfo="editInfo" :noteList="noteList" @editClose="editClose" @editSure="editSure"/>
        <transferOthers :isBatch="isBatch" :depList="depList" :isTrans="isTrans" :transType="transType" :dataInfo="dataInfo" @transClose="transClose" @transferSure="transferSure"/>
    </div>
</template>
<script>
import { request } from "../assets/js/utils/request";
import mixin from '@/assets/js/mixin'
import editDialogVue from './editDialog'
import transferOthers from './transferOthers'
export default {
    mixins: [mixin],
    components: {
        editDialogVue,
        transferOthers
    },
    data() {
        return {
            activeIndex: 0,
            tabList: ['全部','跟进中','已结束'],
            lawyerUid: '',
            detailInfo: {},
            categoryList: [],
            timeList: [],
            formInline: {
                time: '',
                category_id: '',
                city: '',
                status: '',
                note_id: '',
                level_id: ''
            },
            clueList: [],
			areaList: [],
            isEditDialog: false,
            editInfo: {},
            noteList: [],
			levelList: [],
            isBatch: false,
            buyIds: '',
            depList: [],
            isTrans: false,
            dataInfo: {},
            userInfo: {},
            transType: 'lawyerDetail',
			tabStatus: 0,
            childActive: []
        }
    },
    created() {
        this.lawyerUid = this.$route.query.uid
        this.initData()
        this.getDepartData()
        this.getClueData()
    },
    methods: {
        cateClick(params) {
            let categoryIndex = this.childActive.indexOf(params.category_id);
            if (categoryIndex > -1) {
                this.childActive.splice(categoryIndex, 1);
            } else {
                this.childActive.push(params.category_id);
            }
        },
		resetClick() {
		    this.formInline.time = ''
		    this.formInline.category_id = ''
		    this.formInline.city = ''
		    this.formInline.note_id = ''
		    this.formInline.level_id = ''            
		    this.initData()
		},
		queryClick() {
		    this.initData()
		},
		tabClick(item,index) {
			// if(item == '全部线索') {
			//     this.tabStatus = 0
			// }
			// if(item == '跟进中') {
			//     this.tabStatus = 1
			// }
			// if(item == '已结束') {
			//     this.tabStatus = 2
			// }
			this.activeIndex = index
			this.tabStatus = index
			this.initData()
		},
        tiemCLick() {
            this.initData()
        },
        transferSure() {
            this.isTransfer = false
            this.initData()
        },
        transClose() {
            this.isTrans = false
            this.initData()
        },
        editClose() {
            this.isEditDialog = false
            this.initData()
        },
        editSure() {
            this.isEditDialog = false
            this.initData()
        },
        delClick(params) {
            this.$confirm('确定删除该线索?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const formData = new FormData();
                formData.append('buy_id',params.buy_id)
                request({
                    url: '/user/clue/delete',
                    method: 'POST',
                    data: formData
                }).then(res => {
                    if(res.code == 200) {
                        this.initData()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    } else {
                        this.$message.error(res.message);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        transferClick(prams) {
            this.isTrans = true
            this.dataInfo = prams
        },
        editClick(params) {
            this.isEditDialog = true
            this.editInfo = params
        },
        getDepartData() {
            request({
                url: '/user/branch/list',
                method: 'GET',
            }).then(res => {
                if(res.code == 200) {
                    this.depList = res.data.list
                } else {
                    this.$message.error(res.message);
                }
            })
        },
		modifyArray(array) {
		    array.forEach((item) => {
		        this.$set(item,'label',item.name)
		        this.$set(item,'value',item.id)
		        if (item.children && item.children.length > 0) {
		            this.modifyArray(item.children);
		        }
		    })
		    return array
		},
        getClueData() {  
            // 线索分类         
            request({
                url: '/clue/category',
                method: 'GET',
            }).then(res => {
                if(res.code == 200) {
                    this.categoryList = res.data.list || []
                    // this.categoryList = this.modifyArray(res.data.list)
                }
            })
            // 线索搜索时间
            request({
                url: '/config/clue/time',
                method: 'get'
            }).then(res => {
                if(res.code == 200) {
                    this.timeList = res.data.list || []
                }
            })
            // 节点信息
            request({
                url: '/config/note',
                method: 'GET'
            }).then(res => {
                if(res.code == 200) {
                    this.noteList = res.data.list || []
                }
            })
			// 行政区
			request({
			    url: '/config/region',
			    method: 'get'
			}).then(res => {
			    if(res.code == 200) {
			        this.areaList = this.modifyArray(res.data.list)
			    }
			})
            // 获取人员信息
            request({
                url: `/user/lawyer/${this.lawyerUid}`,
                method: 'GET'
            }).then(res => {
                if(res.code == 200) {
                    this.userInfo = res.data.detail || {}
                }
            })
			// 等级
			request({
			    url: '/config/level',
			    method: 'GET'
			}).then(res => {
			    if(res.code == 200) {
			        this.levelList = res.data.list || []
			    }
			})
        },
   //      getClueList() {
   //          let getUrl = `/user/clue/list?trace_uid=${this.lawyerUid}&status=${this.tabStatus}`
			// if(this.formInline.time) {
			//     getUrl += `&time=${this.formInline.time}`
			// }
			// if(this.formInline.category_id) {
			//     getUrl += `&category_id=${this.formInline.category_id}`
			// }
			// if(this.formInline.city) {
			//     getUrl += `&city=${this.formInline.city}`
			// }
			// if(this.formInline.note_id) {
			//     getUrl += `&note_id=${this.formInline.note_id}`
			// }
			// if(this.formInline.level_id) {
			//     getUrl += `&level_id=${this.formInline.level_id}`
			// }
   //          request({
   //              url: getUrl,
   //              method: 'GET',
   //          }).then(res => {
   //              if(res.code == 200) {
   //                  this.clueList = res.data.list || []
   //              } else {
   //                  this.$message.error(res.message);
   //              }
   //          })
   //      },
        initData() {
            let getUrl = `/user/clue/list?trace_uid=${this.lawyerUid}&status=${this.tabStatus}`
            if(this.formInline.time) {
                getUrl += `&time=${this.formInline.time}`
            }
            // if(this.formInline.category_id) {
            //     getUrl += `&category_id=${this.formInline.category_id}`
            // }
            if(this.childActive.length > 0) {
                let category_id = this.childActive.join(',')
                getUrl += `&category_id=${category_id}`
            }
            if(this.formInline.city) {
                getUrl += `&city=${this.formInline.city}`
            }
            if(this.formInline.note_id) {
                getUrl += `&note_id=${this.formInline.note_id}`
            }
            if(this.formInline.level_id) {
                getUrl += `&level_id=${this.formInline.level_id}`
            }
            request({
                url: getUrl,
                method: 'GET',
            }).then(res => {
                if(res.code == 200) {
                    this.clueList = res.data.list || []
                } else {
                    this.$message.error(res.message);
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.lawyer-detail{
    padding: 20px;
    background: #fff;
    .category-content {
        // padding: 20rpx 10rpx;
        margin-top: 20px;
        .item-box {
            font-size: 14px;
            width: auto;
            min-width: 80px;
            text-align: center;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            margin-right: 10px;
            margin-bottom: 10px;
            text-align: center;
            border-radius: 6px;
            cursor: pointer;
        }
        .box-gray {
            color: #808080;
            background: #F7F7F7;
        }

        .box-active {
            color: #fff;
            background: #2967E3;
        }
    }
    .lawyer-box{
        width: 1100px;
        // height: 800px;
        // overflow-y: auto;
        margin: 0 auto;
    }
    .other-list{
        padding: 15px;
    }
    .other-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        padding: 15px;
        margin-bottom: 8px;
        .right{
            padding-left: 10px;
            .bor-R{
                text-align: center;
                flex: 1;
                border-left: 1px solid #E5E5E5;
            }
        }
        .pic{
			width: 70px;
			height: 70px;
			overflow: hidden;
			border-radius: 50%;
            img{
                width: 70px;
            }
        }
        .user-desc{
            line-height: 25px;
        }
        .more-box{
            position: absolute;
            right: 12px;
            top: 3px;
            img{
                width: 2px;
            }
        }
        .pop-box{
            position: absolute;
            right: 12px;
            top: 9px;
            width: 94px;
            padding: 10px;
            background: #fff;
            border-radius: 5px;
            box-shadow: 1px 2px 3px #737373;
            z-index: 100;
            .t{
                width: 100%;
                text-align: left;
                color: #000;
                padding: 10px;
                img{
                    width: 40rpx;
                    height: 40rpx;
                    position: relative;
                    top: 12rpx;
                    margin-right: 10px;
                }
            }
        }
    }
    .active-bor{
        border-color: #2967E3;
    }
    .tab-list{
        display: flex;
        .items{
            width: 140px;
            text-align: center;
            line-height: 40px;
            position: relative;
            font-size: 18px;
            cursor: pointer;
        }
        .defau{
            color: #66728C;
        }
        .active{
            color: #222E4F;
            position: relative;
        }
        .active::after{
            position: absolute;
            left: 47px;
            bottom: 0;
            content: "";
            width: 40px;
            height: 3px;
            opacity: 1;
            border-radius: 20px;
            background: rgba(34, 46, 79, 1);
        }
    }
    /deep/.search-wrap{
        margin: 10px 0;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        background: #F5F6FA;
        .el-form-item{
            margin-bottom: 0;
        }
        .btn{
            padding: 0;
            width: 80px;
            height: 30px;
            border: none;
            // background: #016aed;
        }
        .bg-blue{
            color: #ffffff;
            background: #2967E3;
        }
        .el-select {
            width: 100%;
        }
        .el-input{
            width: 150px;
            .el-input__inner{
                height: 32px;
            }
        }
        .el-date-editor{
            width: 100%;
            .el-input{
                width: 100%;
            }
            .el-input__prefix{
                .el-input__icon{
                    line-height: 32px;
                }
            }
            .el-input__suffix{
                .el-input__suffix-inner{
                    .el-input-circle-close{
                        line-height: 32px;
                    }
                }
            }
        }
    }
    .case-list{
        .items{
            padding-bottom: 10px;
            // border-bottom: 5px solid #F7F7F7;
            margin-bottom: 10px;
            .bot{
                border-bottom: 1px solid #ddd;
                padding-bottom: 10px;
                .title{
                    font-size: 18px;
                    font-weight: 700;
                    color: rgba(56, 56, 56, 1);
                }
            }
            .txt{
                padding: 20px 0;
                p{
                    display: inline-block;
                    line-height: 30px;
                }
            }
            .btn{
                font-size: 14px;
                color: #808080;
            }
        }
    }
}
</style>